<template>
  <el-dialog width="45%" align-center v-model="props.dialogFormVisible" title="添加合同">
    <el-form
      :rules="formRules"
      ref="DialogForm"
      :model="form"
      label-position="top"
      class="showdialog"
    >
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="客户姓名 " prop="name" :label-width="formLabelWidth">
            <el-input
              v-model="form.name"
              style="width: 350px"
              size="large"
              clearable
              placeholder="请输入客户姓名"
              autocomplete="off"
            /> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="客户手机号" prop="phone" :label-width="formLabelWidth">
            <el-input
              v-model="form.phone"
              style="width: 350px"
              size="large"
              clearable
              placeholder="请输入客户手机号"
              autocomplete="off"
            /> </el-form-item
        ></el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="合同编号" prop="contractNo" :label-width="formLabelWidth">
            <el-input
              style="width: 350px"
              v-model="form.contractNo"
              placeholder="请输入合同编号"
              size="large"
              clearable
              autocomplete="off"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="subject" label="购买学科">
            <el-select
              size="large"
              v-model="form.subject"
              style="width: 300px"
              clearable
              placeholder="请选择购买学科"
            >
              <el-option v-for="item in subjectList" :key="item.id" :value="item.content" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item prop="courseName" label="购买课程">
            <el-select
              size="large"
              v-model="form.courseName"
              style="width: 300px"
              clearable
              placeholder="请选择购买课程"
            >
              <el-option v-for="item in courseList" :key="item.id" :value="item.content" />
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item prop="channel" label="渠道来源">
            <el-select
              size="large"
              v-model="form.channel"
              style="width: 300px"
              clearable
              placeholder="请选择渠道来源"
            >
              <el-option v-for="item in channelList" :key="item.id" :value="item.content" />
            </el-select> </el-form-item
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item prop="activityIntroduction" label="活动信息">
            <el-select
              size="large"
              v-model="form.activityIntroduction"
              style="width: 300px"
              clearable
              placeholder="请选择活动信息"
            >
              <el-option v-for="item in activityList" :key="item.id" :value="item.content" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="height: 80px; display: flex; align-items: center">
        <el-col :span="4" style="padding-bottom: 8px">上传文件</el-col>
        <el-col :span="4">
          <!-- <el-upload
            v-model="form.fileUrl"
            ref="upload"
            action="/pdf/upload"
            :auto-upload="false"
            :on-remove="handleRemove"
            :on-change="handleExceed"
          > -->
          <el-button
            size="large"
            style="width: 100px; background-color: #05cd95; color: #fff"
            round
            :icon="folderAddIcon"
            @click="uploadPDF"
          >
            上传
          </el-button>

          <!-- </el-upload> -->
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="large" style="width: 80px" @click="btnCanel"> 取消 </el-button>
        <el-button
          size="large"
          style="width: 80px; background-color: #05cd95; color: #fff"
          @click="BtnOK"
        >
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { reactive, defineProps, onMounted, ref, defineEmits } from 'vue'
// import { FolderAdd } from '@element-plus/icons-vue'
import { ElButton, ElNotification } from 'element-plus'
import { ElMessage } from 'element-plus'
import { cxTabelCourse } from '@/api/course.js'
import { addContract, uploadFileApi } from '@/api/contract.js'
const props = defineProps({
  dialogFormVisible: {
    type: Boolean,
    default: false
  }
})
const form = ref({
  name: '',
  phone: '', //手机号
  contractNo: '', //合同编号
  subject: '',
  courseName: '', //购买课程
  channel: '', //渠道来源
  activityIntroduction: '', //活动信息
  fileUrl: 'http://uuloman.se/fxxmfyesxm'
})
const formRules = reactive({
  name: [{ required: true, message: '客户姓名未填', trigger: 'blur' }],
  phone: [
    { required: true, message: '手机号未填', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
  ],
  contractNo: [
    { required: true, message: '合同编号未填', trigger: 'blur' },
    {
      pattern: /^[0-9a-z]{8}$/,
      message: '必须为 8 位，且只包含数字和小写英文字母',
      trigger: 'blur'
    }
  ],
  subject: [{ required: true, message: '购买学科未选择', trigger: 'blur' }],
  courseName: [{ required: true, message: '购买课程未选择', trigger: 'blur' }],
  channel: [{ required: false, trigger: 'blur' }],
  activityIntroduction: [{ required: false, trigger: 'blur' }]
})

// 学科
const subjectList = ref([{}])
// 课程
const courseList = ref([{}])
// 渠道
const channelList = ref([{}])
// 活动
const activityList = ref([{}])
// 获取购买学科列表
const getsubjectList = async () => {
  const { data } = await cxTabelCourse(2)
  subjectList.value = data
}
// 获取购买课程列表
const getcourseList = async () => {
  const { data } = await cxTabelCourse(19)
  courseList.value = data
}
// 获取渠道列表
const getchannelList = async () => {
  const { data } = await cxTabelCourse(16)
  channelList.value = data
}
// 获取活动列表
const getactivityList = async () => {
  const { data } = await cxTabelCourse(20)
  activityList.value = data
}

onMounted(() => {
  getsubjectList()
  getcourseList()
  getchannelList()
  getactivityList()
})
// 上传文件
const uploadPDF = async () => {
  // debugger
  const fileInput = document.createElement('input')
  fileInput.type = 'file'
  fileInput.accept = 'application/pdf'
  fileInput.addEventListener('change', async (event) => {
    const file = event.target.files[0]
    const formData = new FormData()
    formData.append('file', file)
    try {
      const response = await uploadFile(formData)
      const { fileUrl: url } = response.data // 解析响应获取文件地址
      form.value.fileUrl = url // 将文件地址保存到 fileUrl 变量中
      ElNotification.success({
        title: '成功',
        message: '文件上传成功'
      })
    } catch (error) {
      ElNotification.success({
        title: '成功',
        message: '文件上传成功'
      })
    }
  })

  fileInput.click()
}

const uploadFile = async (formData) => {
  console.log(formData)
  try {
    const res = await uploadFileApi(formData)
    form.value.fileUrl = res.data
    console.log(res.data)
    return res.data
  } catch (error) {
    throw new Error('文件上传失败。')
  }
}
// 取消
const DialogForm = ref(null)
const emits = defineEmits(['close'])

const btnCanel = () => {
  emits('close', false)
  DialogForm.value.resetFields()
}

// 确认
const BtnOK = async () => {
  console.log(form.value)
  await DialogForm.value.validate()
  try {
    await addContract(form.value)
    ElMessage({
      message: '添加成功',
      type: 'success'
    })
  } catch (err) {
    ElMessage.error(err)
  }
  btnCanel()
}
</script>
<style lang="less" scoped>
.showdialog {
  padding: 0 30px;
}
.dialog-footer {
  display: flex;
  justify-content: center;
}
::v-deep .el-input__wrapper {
  background-color: #f5f5f5;
}
</style>
